<template>
  <div class="user-set">
    <div class="register">
      <el-row>
        <el-button @click="addUserInfoSet()" class="dakai" type="primary">提交</el-button>
      </el-row>
    </div>
    <div class="money">自定义字段设置
      <el-button @click="add = true" style="float:right;margin-top:4px;" type="primary">添加字段</el-button>
    </div>
    <!-- 添加字段弹窗 -->
    <el-dialog :visible.sync="add" title="新增" width="38%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="UserField" label-position="right" label-width="120px" ref="dataForm">
          <el-form-item label="字段名称">
            <el-input style="width:80%" v-model="UserField.fieldName"/>
          </el-form-item>
          <el-form-item label="字段类型">
            <el-select placeholder="请选择" v-model="UserField.type">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in options">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示序号">
            <el-input style="width:80%" v-model="UserField.seq"/>
          </el-form-item>
          <el-form-item label="是否启用、显示">
            <el-radio-group v-model="UserField.enabled">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="add = false">取 消</el-button>
        <el-button @click="createData()" type="primary">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 添加字段弹窗 -->
    <subTable :table-data="tableData" :table-label="tableLabel">
      <!-- 调用公告组件(EL-table) slot-button  插入需要按钮模板-->
      <el-table-column align="center" label="操作" slot="button">
        <template slot-scope="scope">
          <el-button
            @click="updateCLick(scope.row)">编辑
          </el-button>
          <el-button
            @click="deleteCLick(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </subTable>

    <!-- 点击编辑进行弹框显示 -->
    <el-dialog :visible.sync="editor" title="修改" width="38%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="UserField" label-position="right" label-width="120px" ref="updateForm">
          <el-form-item label="字段名称">
            <el-input style="width:80%" v-model="UserField.fieldName"/>
          </el-form-item>
          <el-form-item label="字段类型">
            <el-select placeholder="请选择" v-model="UserField.type">
              <el-option
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-for="item in options">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示序号">
            <el-input style="width:80%" v-model="UserField.seq"/>
          </el-form-item>
          <el-form-item label="是否启用、显示">
            <el-radio-group v-model="UserField.enabled">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="editor = false">取 消</el-button>
        <el-button @click="updateData()" type="primary">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息设置弹窗 -->

    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="deleteData(deleteRow)" type="primary">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>

    <div class="money">个人资料设置</div>
    <el-form :model="UserInfoSet" label-position="right" label-width="212px" ref="userInfoSetFrom">
      <el-form-item label="购买课程或班级时填写个人资料">
        <el-radio-group v-model="UserInfoSet.isWriteBuy">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#606266">开启后，学员购买课程时，需填写个人资料</p>
        <p>{{UserInfoSet.userInfoBuyArr.join(",")}}</p>
        <el-button @click="shopping = true" style="margin-top:5px;" type="primary">
          <i class="el-icon-plus"></i>
          编辑
        </el-button>
      </el-form-item>
      <el-form-item label="登录后填写个人资料">
        <el-radio-group v-model="UserInfoSet.isWriteLogin">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="width:408px;height:20px;font-size:14px;line-height:27px;margin:0;color:#606266">开启后，学员登录后需填写个人资料</p>
        <!-- 折叠面板 -->
        <p>{{UserInfoSet.userInfoLoginArr.join(",")}}</p>
        <el-button @click="handleEdit = true" style="margin-top:5px;" type="primary">
          <i class="el-icon-plus"></i>
          编辑
        </el-button>
      </el-form-item>
      <div class="money">其他设置</div>
      <el-form-item label="加入计划或班级要求设置头像">
        <el-radio-group v-model="UserInfoSet.isSetUserHead">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户修改用户名">
        <el-radio-group v-model="UserInfoSet.isSetUserName">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!-- 购买课程弹窗 -->
    <el-dialog :visible.sync="shopping" title="全部标签" width="28%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="UserInfoSet" ref="dataForm">
          <div style="width:100px;height:200px;float:left">
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="邮箱地址(带格式校验)"> 邮箱地址(带格式校验)
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="手机号码(带格式校验)"> 手机号码(带格式校验)
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="公司"> 公司
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="性别"> 性别
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="微博"> 微博
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="行业"> 行业
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="工龄"> 工龄
            </div>
          </div>
          <div style="width:85px;height:200px;float:right">
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="qq"> qq
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="身份证号码"> 身份证号码
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="职业"> 职业
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="微信"> 微信
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="水电费"> 水电费
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoBuyArr" value="文本"> 文本
            </div>
          </div>

        </el-form>

      </div>
      <!--<div class="boot">-->
      <!--<ul>-->
      <!--<li style="text-indent:20px;">可拖动调整次序，酌情勾选需要收集的字段</li>-->
      <!--<li style="text-indent:20px;">若需要新的字段，请在[自定义字段设置]中添加</li>-->
      <!--</ul>-->
      <!--</div>-->
      <div class="dialog-footer" slot="footer">
        <el-button @click="shopping = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 登录后填写个人资料弹窗 -->
    <el-dialog :visible.sync="handleEdit" title="全部标签" width="28%">
      <div style="width:100%;float:left;height:300px;">
        <el-form>
          <div style="width:100px;height:200px;float:left">
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="邮箱地址(带格式校验)"> 邮箱地址(带格式校验)
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="手机号码(带格式校验)"> 手机号码(带格式校验)
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="公司"> 公司
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="性别"> 性别
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="微博"> 微博
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="行业"> 行业
            </div>
            <div style="width:200px;height:38px;padding-top:10px;">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="工龄"> 工龄
            </div>
          </div>
          <div style="width:85px;height:200px;float:right">
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="qq"> qq
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="身份证号码"> 身份证号码
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="职业"> 职业
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="微信"> 微信
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="水电费"> 水电费
            </div>
            <div style="width:105px;height:38px;padding-top:10px;float:right">
              <input type="checkbox" v-model="UserInfoSet.userInfoLoginArr" value="文本"> 文本
            </div>
          </div>
        </el-form>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="handleEdit = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
  </div>
</template>

<script>
  import subTable from "@/components/Eltable";
  import {add, deleteUserField, list, update} from '@/api/system/user_field';
  import {addUserInfoSet, getUserInfoSet} from '@/api/system/user_info_set';
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      subTable
    },
    data() {
      return {
        options: [{
          value: 'text',
          label: '文本'
        },
          {
            value: 'wenzi',
            label: '多行文字'
          },
          {
            value: 'zhengshu',
            label: '整数'
          },
          {
            value: 'xiaoshu',
            label: '小数'
          },
          {
            value: 'date',
            label: '日期'
          }
        ],
        UserField: {
          fieldName: '',
          type: '',
          seq: '',
          enabled: '',
        },
        UserInfoSet: {
          isWriteBuy: 1,
          isWriteLogin: 1,
          isSetUserHead: 2,
          isSetUserName: 1,
          userInfoBuyArr: [],
          userInfoLoginArr: []
        },
        tableLabel: [
          {
            label: "字段名称",
            prop: "fieldName"
          },
          {
            label: "类型",
            prop: "type"
          },
          {
            label: "是否显示",
            prop: "enabled"
          },
          {
            label: "显示序号",
            prop: "seq"
          }
        ],
        tableData:
          [],
        handleEdit:
          false,
        shopping:
          false,
        add:
          false,
        activeNames:
          ["1"],
        editor:
          false,
        handleDelete:
          false,//删除
        deleteRow:
          '',
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        }
        ,
      }
        ;
    },
    created() {
      this.fetchData();
      this.getUserInfoSet()
    },
    methods: {
      fetchData() {
        list(getTenantId()).then(response => {
          response.data.items.map(item => {
            if (item.enabled === '1') item.enabled = '开启';
            if (item.enabled === '0') item.enabled = '关闭';
            if (item.type === 'text') item.type = '文本';
            if (item.type === 'zhengshu') item.type = '整数';
            if (item.type === 'xiaoshu') item.type = '小数';
            if (item.type === 'date') item.type = '日期';
            if (item.type === 'wenzi') item.type = '多行文字';
          });
          this.tableData = response.data.items;
          this.total = response.data.items.length;
          this.listFilter = response.data.items;
        });
      },
      getUserInfoSet() {
        getUserInfoSet(getTenantId()).then(response => {
          this.UserInfoSet = response.data
        });
      },
      // 列表编辑按钮
      updateCLick(row) {
        this.editor = true;
        if (row.enabled === '开启') row.enabled = '1';
        if (row.enabled === '关闭') row.enabled = '0';
        this.UserField = Object.assign({}, row)
      },
      addUserInfoSet() {
        this.$refs['userInfoSetFrom'].validate((valid) => {
          if (valid) {
            this.UserInfoSet.tenantId = getTenantId();
            addUserInfoSet(this.UserInfoSet).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.getUserInfoSet();
            })
          }
        })
      },
      createData() {
        this.add = false;
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.UserField.tenantId = getTenantId();
            add(this.UserField).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      updateData() {
        this.editor = false;
        this.$refs['updateForm'].validate((valid) => {
          if (valid) {
            update(this.UserField).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
            this.fetchData();
          }
        })
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteUserField(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.fetchData();
        })
      }
    }
  }
  ;
</script>

<style>
  .user-set .register {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
    position: relative;
  }

  /*.user-set.dakai {*/
  /*float: right;*/
  /*position: absolute;*/
  /*right: 10px;*/
  /*bottom: -25px;*/
  /*}*/

  .user-set .money {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 20px;
    padding-left: 10px;
    background-color: #f0f3ff;
    padding-right: 34px;
    margin-left: 0px;
  }

  .user-set .boot {
    margin-top: 290px;
    padding: 15px 15px;
    border-radius: 5px;
    background-color: #d9edf7;
    color: #326f8f;
    border-left: 5px solid #50bfff;
    width: 100%;
  }

  .user-set .boot > ul {
    text-decoration: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .user-set .boot > ul > li {
    margin-top: 5px;
  }
</style>
